<script setup>
import { Avatar, KeyOne, Iphone, Message } from '@icon-park/vue-next'
import BeiAn from '@/assets/images/beian.png'

const router = useRouter()
const route = useRoute()

const status = reactive({
    submitLoading: false,//提交按钮状态
    codeButton: false,//发送验证码按钮状态
    codeTip: '获取验证码',//发送验证码按钮文字
    codeRequesting: false//验证码请求中()
})
const data = reactive({
    loginType: 'password',//password密码登陆,code验证码登陆
    username: '',//用户名或者手机号
    password: '',//密码
    phone: '',//手机号
    code: '',//验证码
    codeTime: '',//服务器返回验证码时间
    codeMd5: '',//服务器返回验证码加密字段
    saveTime: 30//登陆信息保存天数
})
const rules = reactive({
    password: {//密码登陆验证
        username: [{ required: true, message: '请输入账号或手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    },
    code: {//验证码登陆验证
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        phone: [{
            validator: (rule, value, callback) => {
                if (!verify.isPhone(value)) {
                    callback(new Error('请输入正确的手机号码'))
                } else {
                    callback()
                }
            }, trigger: 'blur'
        }]
    }
})
const passwordFormRef = ref()//密码登陆form
const codeFormRef = ref()//验证码登陆form

//提交信息
const submit = (passwordForm, codeForm) => {
    if (data.loginType == 'password') {//密码登陆
        const query = {
            password: data.password
        }
        if (verify.isPhone(data.username)) {
            query.phone = data.username
        } else {
            query.username = data.username
        }
        passwordForm.validate((valid, fields) => {
            if (valid) submitPost(query)
        })
    } else if (data.loginType == 'code') {//手机验证码登陆
        const query = {
            phone: data.phone,
            code: data.code,
            codeTime: data.codeTime,
            codeMd5: data.codeMd5
        }
        codeForm.validate((valid, fields) => {
            if (valid) {
                if (!data.codeTime || !data.codeMd5) {
                    sys.tip({
                        message: '请先获取验证码',
                        grouping: true
                    })
                } else {
                    submitPost(query)
                }
            }
        })
    }
}
const submitPost = (query) => {
    status.submitLoading = true
    axios.post('/auth/login', query).then(response => {
        sys.tip(response)
        setTimeout(() => {
            status.submitLoading = false
            if (response.status == 1) {
                localStorage.setItem(config.storage.loginToken, response.data.token)
                localStorage.setItem(config.storage.loginInfo, JSON.stringify(response.data))
                setTimeout(() => {
                    if (route.query.back) {
                        router.push(route.query.back)
                    } else {
                        router.push('/')
                    }
                }, 500)
            }
        }, 500)
    }).catch(error => {
        setTimeout(() => { status.submitLoading = false }, 500)
    })
}
//忘记信息
const forget = () => {
    ElMessageBox.alert('管理员联系电话: 17607137932(微信同号)', '提示信息', {
        autofocus: false
    })
}
//获取验证码
const getCode = (codeForm) => {
    codeForm.validateField('phone', (valid) => {
        if (!valid) return false
        status.codeRequesting = true
        axios.post('auth/phoneCode', {
            phone: data.phone
        }).then(response => {
            sys.tip(response)
            status.codeRequesting = false
            if (response.status == 1) {
                data.codeTime = response.data.codeTime
                data.codeMd5 = response.data.codeMd5
                status.codeTip = '重新发送(60)';
                status.codeButton = true;
                let time = 60
                const codeTipInterval = setInterval(() => {
                    time--
                    if (time == 0) {
                        status.codeTip = '重新发送';
                        status.codeButton = false;
                        clearInterval(codeTipInterval)
                    } else {
                        status.codeTip = '重新发送(' + time + ')';
                    }
                }, 1000)
            }
        })
    })
}
</script>

<template>
    <div class="login-bg">
        <div style="height: 0px;">&nbsp;</div>
        <div class="login-box">
            <div class="title mb20">点壹下后台管理系统</div>
            <el-tabs v-model="data.loginType">
                <el-tab-pane label="账号/手机号登陆" name="password">
                    <el-form ref="passwordFormRef" :model="data" :rules="rules.password">
                        <el-form-item label="" prop="username">
                            <el-input size="large" @keydown.enter="submit(passwordFormRef, codeFormRef)"
                                v-model="data.username" clearable placeholder="请输入账号或手机号" :prefix-icon="Avatar" />
                        </el-form-item>
                        <el-form-item label="" prop="password">
                            <el-input size="large" @keydown.enter="submit(passwordFormRef, codeFormRef)"
                                v-model="data.password" clearable placeholder="请输入密码" show-password type="password"
                                :prefix-icon="KeyOne" />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="验证码登录" name="code">
                    <el-form ref="codeFormRef" :model="data" :rules="rules.code">
                        <el-form-item label="" prop="phone">
                            <el-input size="large" @keydown.enter="submit(passwordFormRef, codeFormRef)"
                                v-model="data.phone" clearable placeholder="请输入手机号" :prefix-icon="Iphone" />
                        </el-form-item>
                        <el-form-item label="" prop="code">
                            <div class="flex-2" style="width: 100%;">
                                <el-input size="large" v-model="data.code" clearable placeholder="请输入验证码"
                                    @keydown.enter="submit(passwordFormRef, codeFormRef)" :prefix-icon="Message" />
                                <el-button class="ml10" size="large" plain @click="getCode(codeFormRef)"
                                    :disabled="status.codeButton" :loading="status.codeRequesting">{{ status.codeTip
                                    }}</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <div class="flex-r">
                <el-link @click="forget()">忘记登陆信息?</el-link>
            </div>
            <el-button class="login-button mt10" type="primary" size="large" :loading="status.submitLoading"
                @click="submit(passwordFormRef, codeFormRef)">登陆</el-button>
        </div>
        <div class="beian">
            <div>版权所有: 杭州点壹下通讯科技有限公司</div>
            <div class="flex-c beian-line2">
                <a class="flex-c mr10" target="_blank"
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010502000477">
                    <el-image :src="BeiAn" style="width:20px;height:20px"></el-image>
                    <span>浙公网安备 33010502000477号</span>
                </a>
                <a class="flex-c" target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">
                    <span>浙ICP备15009615号-1</span>
                </a>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.login-bg {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-image: url(@/assets/images/loginbg.jpg);
    background-position: center center;
    background-size: cover;
}

.beian {
    position: absolute;
    z-index: 2;
    width: 100%;
    color: #fff;
    bottom: 10px;
    text-align: center;
    font-size: 14px;
    line-height: 24px;

    a {
        color: #fff;
        text-decoration: none;

        :hover {
            text-decoration: underline;
        }
    }
}

.login-box {
    position: relative;
    z-index: 3;
    padding: 30px;
    border-radius: 5px;
    background: #fff;
    width: 360px;
    margin: 0 auto;
    margin-left: calc(50vw + (20vw - 180px - 30px));
    margin-top: calc(50vh - 177px - 10vh);
    transition: all 0.3s ease;

    .title {
        font-size: 24px;
        text-align: center;
    }

    .login-button {
        width: 100%;
    }
}

//当整体宽度小于等于800px时登录框居中
@media (max-width: 800px) {
    .login-box {
        margin-left: calc(50vw - 180px - 30px);
    }
}

//手机模式下的登录框与备案信息
@media (max-width: 430px) {
    .login-box {
        width: 80%;
        padding: 30px 20px 20px 20px;
        margin-left: calc(50vw - 40% - 20px);
    }

    .beian-line2 {
        display: block;
    }
}

@media (max-width: 320px) {
    .login-box {
        width: 290px;
        padding: 20px 10px 10px 10px;
        margin-left: calc(50vw - 145px - 10px);
    }
}

//手机横屏
@media (max-height: 430px) {
    .login-box {
        margin-top: calc(50vh - 177px);
    }
}
</style>
